<template>
	<div class="foot-details table-theme">
		<head-back-title title="足迹--足迹详情"></head-back-title>
		<div class="user-foot-info">
			<el-card>
				<div class="user-foot-info-content">
					<div class="user-foot-left">
						<el-image class="head-img" :src="userInfo.heard_img"></el-image>
						<div class="user-foot-text">
							<p>用户名：{{ userInfo.nickname }}</p>
							<p>ID：{{ userInfo.user_id }}</p>
							<p>联系方式：{{ userInfo.phone }}</p>
						</div>
					</div>
					<div class="user-foot-right">
						<p class="title">浏览情况</p>
						<el-row :gutter="20">
							<el-col :span="4">
								<p>小程序</p>
								<p>{{numList[1]}}</p>
							</el-col>
							<el-col :span="4">
								<p>APP</p>
								<p>{{numList[2]}}</p>
							</el-col>
							<el-col :span="4">
								<p>WEB</p>
								<p>{{numList[3]}}</p>
							</el-col>
							<el-col :span="4">
								<p>电脑端</p>
								<p>{{numList[4]}}</p>
							</el-col>
							<el-col :span="4">
								<p>IPAD</p>
								<p>{{numList[5]}}</p>
							</el-col>
							<el-col :span="4">
								<p>后台系统</p>
								<p>{{numList[6]}}</p>
							</el-col>
						</el-row>
					</div>
				</div>
			</el-card>
		</div>
		<div class="foot-record-view">
			<el-row :gutter="20">
				<el-col :span="12">
					<el-card>
						<p class="title" style="margin-bottom: 20px;">总数据数：{{OBtotal}}</p>
						<el-table :data="OtherBrowseList" stripe class="tableLimit">
							<el-table-column label="序号" align="center" prop="">
								<template slot-scope="scope">
									{{ scope.$index + 1 }}
								</template>
							</el-table-column>
							<el-table-column label="类型" align="center" prop="type_name"></el-table-column>
							<el-table-column label="浏览内容" align="center" prop="where"></el-table-column>
							<el-table-column label="查看时间" align="center" prop="">
								<template slot-scope="scope">
									<el-tooltip :content="scope.row.add_time" placement="bottom">
										<p style="cursor: pointer;">{{ scope.row.add_time }}</p>
									</el-tooltip>
								</template>
							</el-table-column>
							<el-table-column label="停留时间" align="center" prop="">
								<template slot-scope="scope">
									<el-tooltip :content="scope.row.stay_time + 's'" placement="bottom">
										<p style="cursor: pointer;">{{ scope.row.stay_time }}s</p>
									</el-tooltip>
								</template>
							</el-table-column>
							<el-table-column label="浏览次数" align="center" prop="num"></el-table-column>
						</el-table>
						<div class="pages">
							<el-pagination
								background
								layout="prev, pager, next, jumper"
								:page-size="11"
								:total="OBtotal"
								@current-change="getOtherRecord"
								:current-page="OBpage"
							></el-pagination>
						</div>
					</el-card>
				</el-col>
				<el-col :span="12">
					<el-card>
						<p class="title" style="margin-bottom: 20px;">总数据数：{{GBtotal}}</p>
						<el-table :data="GoodsBrowseList" stripe class="tableLimit">
							<el-table-column label="序号" align="center" prop="">
								<template slot-scope="scope">
									{{ scope.$index + 1 }}
								</template>
							</el-table-column>
							<el-table-column label="商品名称" align="center" prop="">
								<template slot-scope="scope">
									<el-tooltip :content="scope.row.goods_name" placement="bottom">
										<p style="cursor: pointer;">{{ scope.row.goods_name }}</p>
									</el-tooltip>
								</template>
							</el-table-column>
							<el-table-column label="商品图片" align="center" width="80">
								<template slot-scope="scope">
									<ImgPopover :src="scope.row.image_middle"></ImgPopover>
								</template>
							</el-table-column>
							<el-table-column label="商品价格" align="center" prop="">
								<template slot-scope="scope">
									¥{{ scope.row.retail_price }}
								</template>
							</el-table-column>
							<el-table-column label="查看时间" align="center" prop="">
								<template slot-scope="scope">
									<el-tooltip :content="scope.row.add_time" placement="bottom">
										<p style="cursor: pointer;">{{ scope.row.add_time }}</p>
									</el-tooltip>
								</template>
							</el-table-column>
							<el-table-column label="停留时间" align="center" prop="">
									<template slot-scope="scope">
										<el-tooltip :content="scope.row.stay_time + 's'" placement="bottom">
											<p style="cursor: pointer;">{{ scope.row.stay_time }}s</p>
										</el-tooltip>
									</template>
							</el-table-column>
							<el-table-column label="浏览次数" align="center" prop="num"></el-table-column>
							<el-table-column label="操作" align="center" width="180">
								<template slot-scope="scope">
									<el-button type="text" size="mini" @click="goGoodsDetails(scope.row.goods_id?scope.row.goods_id:scope.row.store_goods_id,scope.row.type)">查看详情</el-button>
								</template>
							</el-table-column>
						</el-table>
						<div class="pages">
							<el-pagination
								background
								layout="prev, pager, next, jumper"
								:page-size="7"
								:total="GBtotal"
								@current-change="getGoodsRecord"
								:current-page="GBpage"
							></el-pagination>
						</div>
					</el-card>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script>
import ImgPopover from '@/components/ImgPopover';
export default {
	components: {
		ImgPopover
	},
	props:{
		id:{
			type:Number,
			default:0
		}
	},
	data() {
		return {
			numList:['','0','0','0','0','0','0'],
			user_id: '', // 用户id
			userInfo: '',
			GoodsBrowseList: [], // 商品足迹记录
			OtherBrowseList: [], // 其他足迹记录
			GBtotal: 0,  // 商品足迹浏览数据总数
			GBpage: 0, // 商品足迹浏览页码
			OBtotal: 0,  // 其他浏览数据总数
			OBpage: 0, // 其他浏览页码
			classifyList: [
				{ type: 0, type_name: '所有' },
				{ type: 1, type_name: '小程序' },
				{ type: 2, type_name: 'APP' },
				{ type: 3, type_name: 'H5' },
				{ type: 4, type_name: 'PC' },
				{ type: 5, type_name: 'Ipad' },
				{ type: 6, type_name: '后台系统' }
			]
		};
	},
	methods: {
		// 初始化列表
		init() {
			this.user_id = this.$route.query.id || this.id;
			this.getUserInfo();
			this.getGoodsRecord();
			this.getOtherRecord();
		},
		getUserInfo() {
			let xdata = {
				group: 1,
				is_all: 1,
				user_id: this.user_id,
			};

			this.$http(this.$ApiList.BrowseDetails, xdata).then(res => {
				for(let i in res.datas.all_browse){
					let type = res.datas.all_browse[i].type
					this.numList[type] = res.datas.all_browse[i].num
				}
			});
		},
		// 获取商品记录
		getGoodsRecord(e) {
			this.GoodsBrowseList = [];
			this.GBpage = e;
			let data = {
				user_id: this.user_id,
				page: e - 1 ? e - 1 : 0,
				limit: 7,
				is_online:1
			};
			this.$http(this.$ApiList.GoodsBrowseList, data).then(res => {
				this.GoodsBrowseList = res.datas.data
				this.GBtotal = res.datas.count;
			});
		},
		// 获取其他记录
		getOtherRecord(e) {
			this.OtherBrowseList = [];
			this.OBpage = e;
			let data = {
				user_id: this.user_id,
				page: e - 1 ? e - 1 : 0,
				limit: 11
			};
			this.$http(this.$ApiList.OtherBrowseList, data).then(res => {
				this.userInfo = res.datas.data[0];
				res.datas.data.forEach(item => {
					item.type_name = this.classifyList[item.type].type_name
					this.OtherBrowseList.push(item);
				});
				this.OBtotal = res.datas.count;
			});
		},
		goGoodsDetails(goodsID,type) {
			switch (type){
				case 1:
					// 商品详情
					this.$router.push({ path: '/goods_details', query: { type: 1, id: goodsID } });
					break;
				case 2:
				case 3:
					// 套餐详情
					this.$router.push({ path: '/edit_package', query: { group_id: goodsID } });
					break;
				case 4:
					this.$router.push({ path: '/store_goods_details', query: { type: 1, id: goodsID } });
					break;
			}
		},
	},
	created() {
		this.init();
	}
};
</script>
<style>
.foot-details {
	padding: 10px 10px 20px 10px;
}
.foot-details .user-foot-info {
	margin-bottom: 20px;
}
.foot-details .head-img {
	width: 82px;
	height: 82px;
	border-radius: 50%;
	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.foot-details .foot-record-view .el-table__body-wrapper {
	min-height: 480px;
}

.foot-details .user-foot-info-content {
	display: flex;
}
.foot-details .user-foot-info-content .title {
	margin-bottom: 20px;
}
.foot-details .user-foot-info .el-card__body {
	padding-bottom: 20px;
}
.foot-details .user-foot-info-content .el-row p {
	text-align: center;
}
.foot-details .user-foot-left {
	display: flex;
	flex: 1;
	margin-right: 10px;
}
.foot-details .user-foot-left .user-foot-text {
	padding-left: 20px;
}
.foot-details .user-foot-left .user-foot-text p:first-child {
	margin-top: 10px;
}
.foot-details .user-foot-right {
	flex: 1;
	margin-left: 10px;
}
.foot-details .tableLimit tr td .cell {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1; /*可以显示的行数，超出部分用...表示 */
	-webkit-box-orient: vertical;
}
</style>
